<script setup>
import { getImageByRequestId } from '@/api/painting'
import { usePaintingStore } from '@/store/modules/painting';
import { ref } from 'vue';
import { onHide } from '@dcloudio/uni-app';
import Toast from '@vant/weapp/dist/toast/toast';

const paintingStore = usePaintingStore()

const intervalId = ref(0)
const isLoadingShow = ref(false)

const createImageFn = async () => {
  isLoadingShow.value = true
  await paintingStore.createImageFn()
  uni.setStorageSync('createImageObj', paintingStore.createImageObj)


  intervalId.value = setInterval(() => {
    getImageByRequestIdFn()
  }, 10000)


}
// 获取当前绘画图片状态
const getImageByRequestIdFn = async () => {
  const res = await getImageByRequestId(paintingStore.createImageObj.requestId)
  if (res.data.status) {
    paintingStore.isLoadingShow = false
    uni.navigateTo({
      url: `/pages/paintingResultPage/index?data=${JSON.stringify(res.data)}`,
    });
  } else if (res.data.reson !== null) {
    Toast.fail('绘图失败！')
    clearInterval(intervalId.value)
    paintingStore.isLoadingShow = false

  }
}

onHide(() => {
  clearInterval(intervalId.value)
})
</script>
<template>
  <div class="startAi-box">
    <div class="startAiSty">
      <div class="btn" @click="createImageFn">
        <div class="generate">开始AI生成</div>
        <div class="Expend">消耗：2算力</div>
      </div>
    </div>
  </div>
  <Loading v-model:isLoadingShow="isLoadingShow"></Loading>
</template>

<style lang="less" scoped>
.startAi-box {
  height: 176rpx;

  .startAiSty {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--a-main-tabNav-bg-color);
    height: 176rpx;
    padding: 41rpx 75rpx;

    .btn {
      box-sizing: border-box;
      width: 600rpx;
      height: 86rpx;
      text-align: center;
      background: var(--a-main-color);
      border-radius: 44rpx;
      color: var(--a-main-Feature-text-color);
      padding: 8rpx;


      .generate {
        font-size: 32rpx;
        font-weight: bold;
      }

      .Expend {
        font-size: 20rpx;
      }
    }
  }
}
</style>